<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>web site</title>
		<style type="text/css">
			body,ul,li{
				margin: 0;
				padding: 0;
			}
			li{
				list-style: none;
			}
			.nav{
				background: #000;
				height: 48px;
				margin-top: 100px;
			}
			.nav-con{
				margin: 0 auto;
				width: 1182px;
				height: 48px;
				position: relative;
			}
			.nav-con ul li{
				float: left;
			}
			.nav-con ul li a{
				text-decoration: none;
				color:#fff;
				display: inline-block;
				height: 48px;
				font: 16px/48px microsoft yahei;
				padding: 0 13px;
				
			}
			.nav-con ul li a:hover{
				background: #3a92d0;
			}
			.hot{
				width: 31px;
				height: 21px;
				background: url(sprite.png) -57px 0;
				position: absolute;
				left:246px;
				bottom: 34px;
			}
			.new{
				width: 31px;
				height: 21px;
				background: url(sprite.png) -135px 0;
				position: absolute;
				left: 636px;
				bottom: 34px;
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<div class="nav-con">
				<div class="hot"></div>
				<div class="new"></div>
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">Java</a></li>
					<li><a href="#">UI设计</a></li>
					<li><a href="#">前端与移动开发</a></li>
					<li><a href="#">问答专区</a></li>
					<li><a href="#">iOS</a></li>
					<li><a href="#">PHP</a></li>
					<li><a href="#">c/c++</a></li>
					<li><a href="#">Python</a></li>
					<li><a href="#">网络营销</a></li>
					<li><a href="#">活动专区</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>